<template>
  <div>
    <h1>{{title}}</h1>
    <p>
      <label for="input_account">用户名:</label>
      <input id="input_account" type="text" maxlength="11" v-model="user_name"/>
    </p>
    <p>
      <label for="input_password">密码:</label>
      <input id="input_password" type="password" v-model="user_pwd">
    </p>
    <p>
      <a>请选择性别:</a>
      <input id="sexual_male" type="radio" value="男" v-model="sexual">
      <label for="sexual_male">男</label>
      <input id="sexual_female" type="radio" value="女" v-model="sexual"/>
      <label for="sexual_female">女</label>
    </p>
    <p>
      <label for="input_address">地区:</label>
      <select id="input_address" v-model="address" @change="onAddressSelected">
        <option disabled value="">请选择</option>
        <option v-for="(item) in address_list">{{item.province}}</option>
        <!-- 可以通过value指定选中的值 -->
        <!--  <option v-for="(item) in address_list" :value="item.id">{{item.province}}</option>   -->
      </select>
    </p>
    <a>请选择兴趣爱好:</a>
    <div v-for="(item) in hobby_list">
      <input v-bind:id="item.id" type="checkbox" v-model="hobby_choose" :value="item.hobby">
      <label :for="item.id">{{item.hobby}}</label>
    </div>
    <p>
      <label for="input_person_sign">个人签名:</label>
      <textarea id="input_person_sign" v-model="person_sign"/>
      <a>{{person_sign}}</a>
    </p>

    <!-- prevent : 提交事件不再重载页面 -->
    <!-- stop : 阻止单击事件继续传播 -->
    <!-- capture : 添加事件监听器时使用事件捕获模 -->
    <!-- self : 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- once : 点击事件将只会触发一次 -->
    <button type="button" @click="onLoginClick($event)"
            @click.prevent="onLoginClickPrevent"
            @click.stop="onLoginClickStop"
            @click.capture="onLoginClickCapture"
            @click.self="onLoginClickSelf"
            @click.once="onLoginClickOnce"
            @click.passive="onLoginClickPassive"

    >登录
    </button>

    <button type="button" @click="onLoginOutClick">退出登录</button>
  </div>
</template>

<script>
  // DES: 引入Vuex
  import vueX from '../store'

  export default {
    name: 'LoginTemplate',
    data () {
      return {
        user_name: '',
        user_pwd: '',
        sexual: '',
        address: '',
        address_list: [
          {
            id: 0,
            province: '广东'
          },
          {
            id: 1,
            province: '广西'
          }
          , {
            id: 2,
            province: '福建'
          },
          {
            id: 3,
            province: '湖南'
          }, {
            id: 4,
            province: '湖北'
          }, {
            id: 5,
            province: '浙江'
          }, {
            id: 6,
            province: '浙江'
          }, {
            id: 7,
            province: '上海'
          }, {
            id: 8,
            province: '南京'
          }
        ],
        hobby_choose: [],
        hobby_list: [
          {
            id: 0,
            hobby: '篮球'
          }, {
            id: 1,
            hobby: '羽毛球'
          }, {
            id: 2,
            hobby: '足球'
          }, {
            id: 3,
            hobby: 'Game'
          }, {
            id: 4,
            hobby: '毒药'
          }, {
            id: 5,
            hobby: '运动员'
          }, {
            id: 6,
            hobby: '跑步'
          }, {
            id: 7,
            hobby: '老赖'
          }, {
            id: 8,
            hobby: '读书'
          },
        ],
        person_sign: ''
      }
    },
    vueX,
    methods: {
      onLoginClickPrevent () {
        console.log('onLoginClickPrevent')
      },
      onLoginClickStop () {
        console.log('onLoginClickStop')
      },
      onLoginClickCapture () {
        console.log('onLoginClickCapture')
      },
      onLoginClickSelf () {
        console.log('onLoginClickSelf')
      },
      onLoginClickOnce () {
        console.log('onLoginClickOnce')
      },
      onLoginClickPassive () {
        console.log('onLoginClickPassive')
      },
      onLoginClick (event) {
        if (event) {
          event.preventDefault()
        }
        // 提交信息到Vuex
        // DES: 直接转换提示Json转换循环引用
        console.log('账号:' + this.user_name + '\n密码:' + this.user_pwd
          + '\n地址:' + this.address + '\n性别:' + this.sexual + '\n个性签名:' + this.person_sign
          + '\n爱好:' + this.hobby_choose)

        let newUserInfo = this.convertUserInfo()
        console.log('输出转换后的用户信息：' + newUserInfo)
        let jsonData = JSON.stringify(newUserInfo)
        console.log('输出--Json：' + jsonData)
        vueX.commit('saveUserInfo', newUserInfo)
        // vueX.commit('saveUserInfoJson', jsonData)
        vueX.commit('saveUserName', this.user_name)
        vueX.commit('saveStateInfo')
      },
      onAddressSelected () {
        console.log('当前选中的地址:' + this.address)
      },
      convertUserInfo () {
        return {
          user_name: this.user_name,
          user_pwd: this.user_pwd,
          address: this.address,
          sexual: this.sexual,
          person_sign: this.person_sign,
          hobby_choose: this.hobby_choose,
        }
      },
      onLoginOutClick () {
        vueX.state.isLogin = false
      }
    },
    props: ['title']
  }
</script>

<style scoped>

</style>
